<template>
  <el-card
    class="intention-container"
    v-loading="loading"
    :element-loading-text="loadinText"
  >
    <el-tabs type="card" @tab-click="changeTab" v-model="activeName">
      <el-button
        class="exportExcel"
        type="primary"
        icon="el-icon-download"
        size="small"
        @click="exportExcel"
        >导出</el-button
      >
      <el-tab-pane label="我的意向" name="first" class="myIntention">
        <el-table
          height="618"
          :data="myIntentionList"
          type="border-card"
          style="width: 100%"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item label="公司名称">
                  <span>{{ props.row.cname }}</span>
                </el-form-item>
                <el-form-item label="公司法人">
                  <span>{{ props.row.lperson }}</span>
                </el-form-item>
                <el-form-item label="联系方式">
                  <span>{{ props.row.mobile }}</span>
                </el-form-item>
                <el-form-item label="业务类型">
                  <span>{{ props.row.text }}</span>
                </el-form-item>
                <el-form-item label="业务员">
                  <span>{{ props.row.uname }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="cname" label="公司名称" width="250">
          </el-table-column>
          <el-table-column prop="text" label="业务类型"> </el-table-column>
          <el-table-column prop="uname" label="业务员" width="100">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="openFollowEditDialog(scope.row.id)"
                type="text"
                size="small"
                >跟进</el-button
              >
              <el-button
                @click.native.prevent="openFollowDialog(scope.row.id)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button
                @click.native.prevent="delIntention(scope.row)"
                type="text"
                size="small"
                >删除</el-button
              >
              <el-button
                @click.native.prevent="openDialog(scope.row.cname)"
                type="text"
                size="small"
                >签单</el-button
              >
            </template>
          </el-table-column>
          <template slot="empty">
            <el-empty description="暂无我的意向"></el-empty>
          </template>
        </el-table>
      </el-tab-pane>
      <el-tab-pane
        label="小组意向"
        name="second"
        class="groupIntention"
        v-if="roleId !== '3'"
      >
        <el-table
          height="618"
          :data="groupIntentionList"
          type="border-card"
          style="width: 100%"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item label="公司名称">
                  <span>{{ props.row.cname }}</span>
                </el-form-item>
                <el-form-item label="公司法人">
                  <span>{{ props.row.lperson }}</span>
                </el-form-item>
                <el-form-item label="联系方式">
                  <span>{{ props.row.mobile }}</span>
                </el-form-item>
                <el-form-item label="业务类型">
                  <span>{{ props.row.text }}</span>
                </el-form-item>
                <el-form-item label="业务员">
                  <span>{{ props.row.uname }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="cname" label="公司名称" width="250">
          </el-table-column>
          <el-table-column prop="text" label="业务类型"> </el-table-column>
          <el-table-column prop="uname" label="业务员" width="100">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="openFollowDialog(scope.row.id)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button
                @click.native.prevent="openTransfersDialog(scope.row.id)"
                type="text"
                size="small"
                >移交客户</el-button
              >
            </template>
          </el-table-column>
          <template slot="empty">
            <el-empty description="暂无小组意向"></el-empty>
          </template>
        </el-table>
      </el-tab-pane>
      <el-tab-pane
        label="全部意向"
        name="third"
        class="allIntention"
        v-if="roleId === '1'"
      >
        <el-table
          height="618"
          :data="allIntentionList"
          type="border-card"
          style="width: 100%"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" class="demo-table-expand">
                <el-form-item label="公司名称">
                  <span>{{ props.row.cname }}</span>
                </el-form-item>
                <el-form-item label="公司法人">
                  <span>{{ props.row.lperson }}</span>
                </el-form-item>
                <el-form-item label="联系方式">
                  <span>{{ props.row.mobile }}</span>
                </el-form-item>
                <el-form-item label="业务类型">
                  <span>{{ props.row.text }}</span>
                </el-form-item>
                <el-form-item label="业务员">
                  <span>{{ props.row.uname }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="cname" label="公司名称" width="250">
          </el-table-column>
          <el-table-column prop="text" label="业务类型"> </el-table-column>
          <el-table-column prop="uname" label="业务员" width="100">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="openFollowDialog(scope.row.id)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button
                @click.native.prevent="openTransfersDialog(scope.row.id)"
                type="text"
                size="small"
                >移交客户</el-button
              >
            </template>
          </el-table-column>
          <template slot="empty">
            <el-empty description="暂无全部意向"></el-empty>
          </template>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 分页组件 -->
    <div style="height: 60px; margin-top: 19px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[15, 30, 40]"
        :page-size="page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 签单状态弹窗 -->
    <businessDialog
      :showDialog="showDialog"
      :cname="cname"
      :businessDialogTitle="businessDialogTitle"
      :getMyIntentionList="getMyIntentionList"
      @closeDialog="closeDialog"
    ></businessDialog>
    <!-- 编辑跟进状态弹窗 -->
    <editDialog
      :followEditDialog="followEditDialog"
      :company_id="company_id"
      @closeFollowEditDialog="closeFollowEditDialog"
    ></editDialog>
    <!-- 查看跟进状态弹窗 -->
    <followDialog
      :followShowDialog="followShowDialog"
      :company_id="company_id"
      @closeFollowDialog="closeFollowDialog"
    ></followDialog>
    <!-- 移交客户弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      title="移交客户"
      :visible.sync="isTransfersDialog"
      width="50%"
      center
      @open="getTransfersUsers"
    >
      <span style="margin-right: 20px">请选择移交人员</span>
      <el-select
        ref="transfersList"
        filterable
        v-model="transfersValue"
        placeholder="请选择移交人员"
      >
        <el-option
          v-for="item in transfersUserList"
          :key="item.uname"
          :label="item.uname"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="isTransfersDialog = false"
          >取 消</el-button
        >
        <el-button type="primary" @click.native.prevent="transfersCompany"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  getMyIntentionListApi,
  getGroupIntentionListApi,
  getAllIntentionListApi,
  delIntentionApi,
  getTransfersUserListApi,
  transfersCompanyApi,
  getMyIntentionExcelApi,
  getGroupIntentionExcelApi,
  getAllIntentionExcelApi
} from '@/api/company'
// 导入  编辑进度  弹窗
import editDialog from '@/views/mycustomer/components/edit-dialog.vue'
// 导入  查看进度  弹窗
import followDialog from '@/views/mycustomer/components/follow-dialog.vue'
// 导入  签单客户  弹窗
import businessDialog from '@/components/business-dialog'
export default {
  name: 'intention-page',
  components: {
    businessDialog,
    editDialog,
    followDialog
  },
  created () {
    this.roleId = localStorage.getItem('crm-roleid')
    this.getMyIntentionList()
    this.depart_id = localStorage.getItem('crm-departId')
  },
  data () {
    return {
      roleId: 0,
      loading: false,
      loadinText: '',
      page: 1,
      page_size: 15,
      total: 0,
      activeName: 'first',
      showDialog: false,
      followShowDialog: false,
      company_id: 0,
      cname: '',
      businessDialogTitle: '签单客户',
      // 编辑进度弹窗
      followEditDialog: false,
      // 我的意向 列表
      myIntentionList: [],
      // 小组意向客户列表
      groupIntentionList: [],
      // 全部意向客户列表
      allIntentionList: [],
      // 移交客户得弹窗和列表
      isTransfersDialog: false,
      transfersUserList: [],
      transfersValue: '',
      rows: [],
      // 文件夹名称
      excelTitle: '',
      depart_id: 0
    }
  },
  methods: {
    // 获取 我的意向 列表
    async getMyIntentionList () {
      this.loading = true
      this.loadinText = '数据正在加载中!'
      const { data: res } = await getMyIntentionListApi(
        this.page,
        this.page_size
      )
      // console.log('获取 我的意向 列表', res)
      this.myIntentionList = [...res.data.lists]
      this.total = res.data.num
      this.loading = false
      this.loadinText = ''
    },
    // 获取 小组意向客户
    async getGroupIntentionList () {
      this.loading = true
      this.loadinText = '数据正在加载中!'
      const { data: res } = await getGroupIntentionListApi(
        this.page,
        this.page_size,
        this.roleId
      )
      // console.log('获取 小组意向 列表', res)
      this.groupIntentionList = [...res.data.lists]
      this.total = res.data.num
      this.loading = false
      this.loadinText = ''
    },
    // 获取 全部意向客户
    async getAllIntentionList () {
      this.loading = true
      this.loadinText = '数据正在加载中!'
      const { data: res } = await getAllIntentionListApi(
        this.page,
        this.page_size,
        this.depart_id
      )
      // console.log('获取 全部意向 列表', res)
      this.allIntentionList = [...res.data.lists]
      this.total = res.data.num
      this.loading = false
      this.loadinText = ''
    },
    // 切换tab栏 重置页码  判断选择的是哪个tab栏
    changeTab () {
      this.page = 1
      this.page_size = 15
      this.total = 0
      this.activeNameChange()
    },
    // 切换第几页
    handleCurrentChange (val) {
      this.page = val
      this.activeNameChange()
    },
    // 手动更改页码
    handleSizeChange (val) {
      this.page_size = val
      this.activeNameChange()
    },
    // 判断哪个tab栏被选中
    activeNameChange () {
      // console.log('打印activeName', this.activeName)
      if (this.activeName === 'first') {
        // console.log('获取 我的意向 列表')
        this.getMyIntentionList()
      } else if (this.activeName === 'second') {
        // console.log('获取 小组意向客户')
        this.getGroupIntentionList()
      } else if (this.activeName === 'third') {
        // console.log('获取 全部意向客户')
        this.getAllIntentionList()
      }
    },
    // 删除意向客户
    delIntention (val) {
      this.$confirm('你确定要删除吗？', '温馨提示', { type: 'warning' })
        .then(async () => {
          this.loading = true
          this.loadinText = '数据正在删除中!'
          const { data: res } = await delIntentionApi(val.cname, val.id)
          // console.log('删除意向客户', res)
          if (res.code === 200) {
            this.loading = false
            this.loadinText = ''
            this.activeNameChange()
            this.$message({
              showClose: true,
              message: '删除成功!',
              type: 'success',
              duration: 1500
            })
          }
        })
        .catch(() => {})
    },
    // 打开签单弹窗
    openDialog (val) {
      this.showDialog = true
      this.cname = val
    },
    // 关闭签单弹窗
    closeDialog () {
      this.showDialog = false
    },
    // 打开 编辑进度 弹窗
    openFollowEditDialog (val) {
      this.followEditDialog = true
      this.company_id = val
    },
    // 关闭 编辑进度 弹窗
    closeFollowEditDialog () {
      this.followEditDialog = false
    },
    // 打开 查看进度 弹窗
    openFollowDialog (val) {
      this.followShowDialog = true
      this.company_id = val
    },
    // 关闭  查看进度 弹窗
    closeFollowDialog () {
      this.followShowDialog = false
    },
    openTransfersDialog (val) {
      this.company_id = val
      this.isTransfersDialog = true
    },
    closeTransfersDialog () {
      this.isTransfersDialog = false
    },
    // 获取移交的客户
    async getTransfersUsers () {
      const { data: res } = await getTransfersUserListApi()
      // console.log('获取移交的客户', res)
      this.transfersUserList = res.data
    },
    // 移交客户
    async transfersCompany () {
      const { data: res } = await transfersCompanyApi(
        this.transfersValue,
        this.company_id
      )
      // console.log('移交客户', res)
      if (res.code === 200) {
        this.$message({
          showClose: true,
          message: '移交客户成功!',
          type: 'success',
          duration: 1500
        })
        this.closeTransfersDialog()
        this.activeNameChange()
        this.transfersValue = ''
      }
    },
    // 将表头数据和数据进行对应
    formatJson (rows, headersArr, headersRelations) {
      // [
      //   [ 值1, 值2, 值3, ... ]
      // ]
      const resultsArr = rows.map(item => {
        const arr = []
        headersArr.forEach(key => {
          const englishKey = headersRelations[key]
          const value = item[englishKey]
          arr.push(value)
        })
        return arr
      })
      return resultsArr
    },
    // 导出表格
    async exportExcel () {
      if (this.activeName === 'first') {
        const { data: res } = await getMyIntentionExcelApi()
        // console.log('导出 我的意向客户', res)
        this.rows = res.data
        this.excelTitle = `${res.username}意向客户表`
      }
      if (this.activeName === 'second') {
        const { data: res } = await getGroupIntentionExcelApi()
        // console.log('导出 小组意向客户', res)
        this.rows = res.data
        this.excelTitle = `${res.groupname}意向客户表`
      }
      if (this.activeName === 'third') {
        const { data: res } = await getAllIntentionExcelApi()
        // console.log('导出 全部意向客户', res)
        this.rows = res.data
        this.excelTitle = '全部意向客户表'
      }
      // 准备一个可枚举的表头
      const headersArr = [
        '团队名称',
        '负责人',
        '日期',
        '客户姓名',
        '单位名称',
        '联系方式',
        '业务类容',
        '跟进记录1',
        '跟进记录2',
        '跟进记录3',
        '跟进记录4'
      ]
      // 找到字段对应的  中英文
      const headersRelations = {
        团队名称: 'groupName',
        负责人: 'username',
        日期: 'date',
        客户姓名: 'customerName',
        单位名称: 'companyName',
        联系方式: 'mobile',
        业务类容: 'business',
        跟进记录1: 'firstFollow',
        跟进记录2: 'secondFollow',
        跟进记录3: 'thirdFollow',
        跟进记录4: 'fourthFollow'
      }
      // 这里是表格中的数据 必须是数组
      const dataArr = this.formatJson(this.rows, headersArr, headersRelations)
      // console.log(dataArr)
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header: headersArr, // 表格的头部
          data: dataArr, // 二维数组 [ [], [], [] ]
          filename: this.excelTitle, // 导出的excel文件名
          autoWidth: true, // 是否开启单元格宽度自适应
          bookType: 'xlsx' // 类型
        })
      })
    }
  },
  watch: {}
}
</script>

<style lang="scss">
.intention-container {
  box-sizing: border-box;
  height: 837px;
  padding: 25px 40px 0px;
  .el-tabs {
    .el-tabs__item.is-active {
      background-color: #f5f7fa;
    }
    // .exportExcel {
    //   margin-left: 1450px;
    // }
  }
}
</style>
